<template>
  <view class="check">
    <action-bar :options="navOptions">
      <view class="NAVBAR_left" slot="slot_left" @click="btn_closeCamera()">
        <view class="NAVBAR_left_icon" style="width: 100%">
          <view class="cuIcon-back"></view>
        </view>
      </view>
    </action-bar>

    <view class="check-box">
      <uni-forms
        ref="valiForm"
        :rules="rules"
        :modelValue="valiFormData"
        label-position="top"
        :label-width="200"
      >
        <!-- 检查数量 -->
        <view class="check-box-num">
          <uni-forms-item label="执业项" name="contentName">
            {{ valiFormData.contentName }}
          </uni-forms-item>
        </view>

        <!-- 是否涉及 -->
        <view class="check-box-num">
          <uni-forms-item label="是否涉及" name="involve">
            <uni-data-checkbox
              v-model="valiFormData.involve"
              @change="changeInvolve"
              :disabled="design == 'confirm'"
              :localdata="sex"
            />
          </uni-forms-item>
        </view>

        <!-- 检查数量 -->
        <view class="check-box-num" v-show="show1">
          <uni-forms-item label="抽查数量" name="checkNum">
            <uni-easyinput
              v-model="valiFormData.checkNum"
              :clearable="false"
              :disabled="design == 'confirm'"
              placeholder="请输入抽查数量"
            />
          </uni-forms-item>
        </view>

        <!-- 位置/编码 -->
        <view class="check-box-num" v-show="show1">
          <uni-forms-item label="位置" name="location">
            <uni-easyinput
              v-model="valiFormData.location"
              :clearable="false"
              :disabled="design == 'confirm'"
              placeholder="请输入位置/编码"
            />
          </uni-forms-item>
        </view>

        <!-- 检查情况 -->
        <view class="check-box-num">
          <uni-forms-item label="测试结果" name="content">
            <uni-easyinput
              type="textarea"
              :clearable="false"
              :disabled="design == 'confirm'"
              v-model="valiFormData.content"
              placeholder="请输入测试结果"
            />
          </uni-forms-item>
        </view>

        <!-- 发现问题及处理措施 -->
        <view class="check-box-num">
          <uni-forms-item label="发现问题及处理措施" name="problemAction">
            <uni-easyinput
              type="textarea"
              :clearable="false"
              :disabled="design == 'confirm'"
              v-model="valiFormData.problemAction"
              placeholder="请输入发现问题及处理措施"
            />
          </uni-forms-item>
        </view>

        <!-- 是否合格 -->
        <view class="check-box-num" v-show="show1">
          <uni-forms-item label="是否合格" name="sexs">
            <uni-data-checkbox
              v-model="valiFormData.judgment"
              :disabled="design == 'confirm'"
              :localdata="sexs"
            />
          </uni-forms-item>
        </view>

        <view class="check-box-num" v-show="show1">
          <uni-forms-item
            label="现场检查"
            :required="isRequired === 1 ? true : false"
            name="imageValue"
          >
            <view
              class="photoArray"
              v-for="(imageUrl, index) in fileUrl"
              :key="index"
            >
              <image
                v-show="fileUrl"
                mode="widthFix"
                style="width: 240rpx"
                :src="imageUrl"
                @tap="ViewImage(imageUrl, index)"
              />
              <view
                class="cu-tag bg-red"
                style="
                  position: absolute;
                  padding: 3px 6px;
                  height: auto;
                  margin-left: 192rpx;
                "
                @tap.stop="DelImg($event, 'fileUrl', index)"
                v-show="fileUrl"
                ><text class="cuIcon-close"></text
              ></view>
            </view>

            <view v-if="fileUrl.length < 20">
              <image
                mode="widthFix"
                style="width: 240rpx"
                @click="toPhotoCatch('imageFile')"
                src="/static/outline_card.png"
              />
            </view>

            <view class="check-box-num-span"> 请选择有效执业部位进行拍照 </view>
          </uni-forms-item>
        </view>
      </uni-forms>

      <view style="height: 100rpx"></view>
    </view>

    <view class="check-box-btn" v-if="design != 'confirm'">
      <button
        class="check-box-btn-online"
        type="default"
        @click="submit()"
        v-if="networkType"
      >
        在线提交
      </button>
      <view v-else class="flex check-box-btn-unonline">
        <button
          type="default"
          class="check-box-btn-unonline-btn left"
          @click="offline_save_befor()"
        >
          离线保存
        </button>
        <button
          type="default"
          class="check-box-btn-unonline-btn rigth"
          @click="submit()"
        >
          在线提交
        </button>
      </view>
    </view>

    <toast></toast>
    <take-photo v-if="cameraOpening" v-model="fileUrl" :limit="20" />
  </view>
</template>

<script>
import { baseImgUrl, baseApiUrl } from "@/config.js";
import getDateTime from "@/utils/getdateTime.js";
import takePhoto from "./components/takePhoto.vue";
import { mapState } from "vuex";
import { tempFilePathToFile } from "@/utils/compress.js";
export default {
  components: { takePhoto },
  computed: {
    ...mapState({
      login: (state) => state.login,
      typeList: (state) => state.manage.typeList,
      maintainDetailId: (state) => state.manage.maintainDetailId,
      startTime: (state) => state.manage.startTime,
      endTime: (state) => state.manage.endTime,
    }),
  },
  data() {
    return {
      baseApiUrl,
      baseImgUrl: baseImgUrl,
      cameraOpening: false, // 是否打开相机

      navOptions: {
        statusBar: "dark",
        left: {
          icon: "back",
        },
        center: {
          title: "在线执业",
        },
      },
      flag: false, // 隐藏保存按钮
      list: [],
      // 校验规则
      rules: {},
      // 校验表单数据
      valiFormData: {
        checkNum: null,
        content: null,
        contentName: null,
        judgment: "0",
        startTime: null, // 操作时间
        fileUrls: "", // 上传文件列表
        involve: null, // 是否涉及
        taskId: null, // 必传项
        location: null,
        maintainDetailId: null, // 必传项
        required: null,
        state: null,
      },
      fileUrl: [], // 展示文件列表

      // 单选数据源
      sexs: [
        {
          text: "是",
          value: "0",
        },
        {
          text: "否",
          value: "1",
        },
      ],
      sex: [
        {
          text: "不涉及",
          value: "0",
        },
        {
          text: "涉及",
          value: "1",
        },
      ],
      isRequired: undefined,
      isProjectHead: false, // 用于判断是否为项目负责人进入的确认执业的字段

      show1: false, // 通过involve判断字段是否展示
      implement: null,

      // design: null, // 通过该字段判断是不是为项目负责人确认项目时查询数据详情

      design: null, // 该字段代表是开始执业还是确认任务(为'confirm'时代表确认任务confirm；为'practice'时代表开始执业)
      loading: false,

      setInterval: null, // 定时器
      networkType: true, // 网络状态
    };
  },
  onLoad(options) {
    // this.design = options.design
    //! 判断是否再执业时间内
    let newListTime = new Date().getDate();
    if (this.startTime && this.endTime) {
      let newStart = this.startTime.split("-")[2] || 0;
      let NewEnd = this.endTime.split("-")[2] || 0;

      if (Number(newStart) > newListTime || newListTime > Number(NewEnd)) {
        this.design = "confirm"; // 若当前时间在执业计划时间外，直接将design字段改为确认任务状态
      }
    }
    let data;
    this.typeList.forEach((item) => {
      item.data.forEach((list) => {
        if (list.maintainDetailId == this.maintainDetailId) {
          data = list;
        }
      });
    });
    if (data) {
      this.valiFormData.checkNum = data.checkNum;
      this.valiFormData.content = data.content;
      this.valiFormData.contentName = data.contentName;
      this.valiFormData.required = data.required;
      this.valiFormData.state = data.state;
      this.valiFormData.executeId = options.executeId;
      this.valiFormData.problemAction = data.problemAction;
      this.valiFormData.judgment = data.judgment;
      this.valiFormData.location = data.location;
      this.valiFormData.startTime = data.startTime || null;
      // 进行判空
      if (data.fileUrls != null) {
        this.fileUrl = data?.fileUrls.split(",");
      }
      this.valiFormData.taskId = data.taskId;
      this.valiFormData.maintainDetailId = data.maintainDetailId;
      this.valiFormData.involve = data.involve;
    }
  },
  onShow() {
    // 获取当前网络状态，当有网络时，则调用接口，若无网络则使用缓存数据
    this.networkType = navigator.onLine;
    this.setInterval = setInterval(() => {
      this.networkType = navigator.onLine;
    });
    if (this.design != "confirm") {
      // #ifdef MP-WEIXIN
      wx.enableAlertBeforeUnload({
        message: "确定所有数据都保存，是否返回？",
        complete: (e) => {
          console.log(e);
        },
      });
      // #endif
    }
  },
  watch: {
    "$store.state.unitTask.imageFile": {
      handler(val) {
        if (!val == "") {
          // this.fileUrl = val
          let url = val.split(",");
          this.fileUrl = url;
          // this.compress(val)
        }
      },
      deep: true,
      immediate: true,
    },
    "valiFormData.involve": {
      immediate: true,
      handler(val) {
        if (val == "0") {
          this.show1 = false;
        } else {
          this.show1 = true;
        }
      },
      deep: true,
    },
  },
  methods: {
    btn_closeCamera() {
      delete this.navOptions.slot;
      this.navOptions.center = { title: "在线作业" };
      this.cameraOpening = false;
    },

    // 获取表单信息
    getForm() {
      if (this.loading) return;
      this.loading = true;
      uni.showLoading({
        title: "正在加载请稍后",
        mask: true,
      });
      this.$store
        .dispatch("staffForm", this.executeId)
        .then((res) => {
          if (res && res.code === 200) {
            this.valiFormData.checkNum = res.data.checkNum;
            this.valiFormData.content = res.data.content;
            this.valiFormData.problemAction = res.data.problemAction;
            this.valiFormData.judgment = res.data.judgment;
            // 进行判空
            if (res.data.fileUrls != null) {
              this.fileUrl = res.data?.fileUrls.split(",");
            }
            if (res.data.startTime != null) {
            }
            this.valiFormData.taskId = res.data.taskId;
            this.valiFormData.maintainDetailId = res.data.maintainDetailId;
            this.valiFormData.involve = res.data.involve;
          }
        })
        .finally(() => {
          let timer = setTimeout(() => {
            this.loading = false;
            uni.hideLoading();
            clearTimeout(timer);
          }, 3000);
        });
    },
    //! 跳往拍照页面
    toPhotoCatch(fileUrl) {
      let that = this;
      // 而项目负责人不能进行操作功能
      if (this.design == "confirm") return;
      let { userInfo } = this.login;
      //! 不跳转拍照页面，而是调用uni.chooseImage进行拍照
      uni.chooseImage({
        count: 20, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["camera"], //从相册选择
        success: async function (res) {
          let image = res.tempFilePaths[0];
          let networkType = navigator.onLine;
          if (networkType) {
            let filePath = await tempFilePathToFile(image);
            // 将签名图片上传至系统
            uni.uploadFile({
              url: baseApiUrl + "/common/upload",
              name: "file",
              header: {
                Authorization: userInfo.token,
              },
              filePath: filePath, // 图片的临时路径
              success: ({ statusCode, data }) => {
                if (statusCode == 200) {
                  that.fileUrl.push(JSON.parse(data).url);
                }
              },
              fail: (err) => {
                uni.showToast({
                  title: err,
                  icon: "none",
                  duration: 2000,
                });
              },
            });
          } else {
            that.fileUrl.push(image);
          }
          // uni.saveFile({
          //   tempFilePath: image,
          //   success: function (res1) {
          //     var savedFilePath = res1.savedFilePath;
          //     that.fileUrl.push(savedFilePath)
          //     console.log(that.fileUrl)
          //   }
          // });
        },
      });
    },
    // 切换是否涉及功能时
    changeInvolve(e) {
      let val = e.detail.value;
      if (val == "0") {
        this.show1 = false;
        this.valiFormData.checkNum = null;
        this.valiFormData.judgment = "";
        this.fileUrl = [];
        this.valiFormData.fileUrls = "";
        this.valiFormData.location = null;
        this.valiFormData.content = "不涉及";
        this.valiFormData.problemAction = "不涉及";
      } else {
        this.show1 = true;
        // 清空所有数据
        this.valiFormData.checkNum = null;
        this.valiFormData.content = null;
        this.valiFormData.problemAction = null;
        this.valiFormData.location = null;
        this.valiFormData.judgment = "";
        this.fileUrl = [];
        this.valiFormData.fileUrls = "";
      }
    },
    // 删除图片
    DelImg(e, label, index) {
      // 而项目负责人不能进行操作功能
      if (this.isProjectHead || this.design == "confirm") return;
      uni.showModal({
        title: "提示",
        content: "确定要删除这张图片吗？",
        cancelText: "取消",
        confirmText: "去掉",
        success: (res) => {
          if (res.confirm) {
            this.fileUrl.splice(index, 1);
          }
        },
      });
    },
    ViewImage(imageUrl, index) {
      uni.previewImage({
        urls: this.fileUrl,
        current: index,
      });
    },
    // 保存
    submit() {
      let that = this;
      uni.showModal({
        title: "注意",
        content: "“提交”将会覆盖原先操作人的数据，如无修改数据，请选择“返回”",
        showCancel: true,
        cancelText: "返回",
        success(res) {
          if (res.confirm) {
            let networkType = navigator.onLine;
            if (networkType) {
              //! 2023-11-01 11:49:21 因前置条件时 已经限制了不能选择跨月的执业时间，故此处陈年老代码我不改（已咨询佳明，怕改出问题
              // 判断是否再执业时间内
              let startTime = that.$store.state.manage.startTime;
              let endTime = that.$store.state.manage.endTime;
              // 获取当前时间戳
              let newListTime = new Date().getDate();
              if (startTime && endTime) {
                let newStart = startTime.split("-")[2] || 0;
                let NewEnd = endTime.split("-")[2] || 0;
                if (
                  Number(newStart) > newListTime ||
                  newListTime > Number(NewEnd)
                ) {
                  uni.showModal({
                    title: "警告",
                    content: "当前执业时间不在计划执业时间内，无法提交执业内容",
                  });
                  return;
                }
              }
              // 根据是否涉及判断所需校验的数据是什么;以及对应的校验文本是什么
              let checkData, checkDataName;
              let practice = that.$store.state.manage.practice; // 获取该任务是月度、季度、年度类型
              let typeList = that.$store.state.manage.typeList;
              if (
                that.valiFormData.involve == "1" &&
                that.valiFormData.required.indexOf(practice) != "-1"
              ) {
                checkData = [
                  "checkNum",
                  "location",
                  "content",
                  "problemAction",
                  "judgment",
                ];
                checkDataName = [
                  "抽查数量",
                  "位置",
                  "测试结果",
                  "发现问题及处理措施",
                  "是否合格",
                ];
              } else {
                checkData = [];
                checkDataName = [];
              }
              for (let j = 0; j < checkData.length; j++) {
                if (
                  that.valiFormData[checkData[j]] == null ||
                  that.valiFormData[checkData[j]] == ""
                ) {
                  uni.showToast({
                    title: `请填写${checkDataName[j]}`,
                    icon: "none",
                    duration: 1200,
                  });
                  return;
                }
              }
              // 附加判断条件
              if (
                that.valiFormData.involve == "1" &&
                that.valiFormData.required.indexOf(practice) != "-1"
              ) {
                if (that.fileUrl.length == 0) {
                  uni.showToast({
                    title: "请上传现场检查照片",
                    icon: "none",
                    duration: 1200,
                  });
                  return;
                }
              }

              // 如果信息填充完成，修改执业内容状态
              var timeStr = getDateTime.dateTimeStr("y-m-d h:i:s");
              // 检查【现场检查图片】是否有本地图片，如果有，先转为线上图片,在push至newFileUrl；如果没有，则直接push至newFileUrl
              new Promise((resolve, reject) => {
                let newFileUrl = [];
                if (that.fileUrl.length > 0) {
                  that.fileUrl.forEach((item) => {
                    if (
                      item.indexOf("http://tmp/") != "-1" ||
                      item.indexOf("http://store/") != "-1" ||
                      item.indexOf("wxfile://") != "-1"
                    ) {
                      uni.uploadFile({
                        url: that.baseApiUrl + "/common/uploadStaffFile",
                        name: "file",
                        header: {
                          Authorization: that.$store.state.login.userInfo.token,
                        },
                        filePath: item,
                        success: (uploadFileRes) => {
                          let image =
                            that.baseApiUrl +
                            JSON.parse(uploadFileRes.data).fileName;
                          newFileUrl.push(image);
                          if (newFileUrl.length == that.fileUrl.length) {
                            resolve(newFileUrl);
                          }
                        },
                        fail: (err) => {
                          uni.showToast({
                            title: err,
                            icon: "none",
                            duration: 2000,
                          });
                        },
                      });
                    } else {
                      newFileUrl.push(item);
                      if (newFileUrl.length == that.fileUrl.length) {
                        resolve(newFileUrl);
                      }
                    }
                  });
                } else {
                  resolve(newFileUrl);
                }
              }).then((dist) => {
                let fileUrl = dist ? dist.join(",") : "";
                let monent = {
                  checkNum: that.valiFormData.checkNum || null,
                  content: that.valiFormData.content || null,
                  contentName: that.valiFormData.contentName || null, // 子项任务名称
                  executeId: that.valiFormData.executeId || null,
                  fileUrls: fileUrl || null, // 上传文件列表
                  involve: that.valiFormData.involve || null, // 是否涉及
                  judgment: that.valiFormData.judgment || "",
                  maintainDetailId: that.valiFormData.maintainDetailId || null, // 必传项
                  problemAction: that.valiFormData.problemAction || null,
                  required: that.valiFormData.required || null,
                  location: that.valiFormData.location || null,
                  startTime: that.valiFormData.startTime
                    ? that.valiFormData.startTime
                    : timeStr,
                  state: "1",
                  taskId: that.valiFormData.taskId || null, // 必传项
                };
                that.$store.dispatch("staffUpdate", monent).then((res) => {
                  if (res && res.code === 200) {
                    uni.showToast({
                      title: "保存成功",
                      icon: "none",
                      duration: 1200,
                    });
                    that.fileUrl.forEach((item) => {
                      uni.removeSavedFile({
                        filePath: item,
                      });
                    });
                    // 判断本地缓存中是否有这条执业id，有的话就将缓存的数据清除，以在线提交为准；没有的话就return
                    let list = that.$store.state.manage.online_list || [];
                    let index = list.findIndex(
                      (item) => item.maintainDetailId == monent.maintainDetailId
                    );
                    if (index != "-1") {
                      list.splice(index, 1);
                      that.$store.commit("save_online_list", list);
                    }

                    // 更新执业子列表
                    typeList.forEach((item) => {
                      for (let k = 0; k < item.data.length; k++) {
                        if (
                          item.data[k].maintainDetailId ==
                          monent.maintainDetailId
                        ) {
                          item.data[k] = monent;
                        }
                      }
                    });
                    // 跳转回执业内容
                    uni.navigateBack();
                  } else {
                    uni.showToast({
                      title: res.msg,
                      icon: "none",
                      duration: 1200,
                    });
                  }
                });
              });
            } else {
              uni.showModal({
                title: "提示",
                content: "当前网络离线，请使用离线保存或等待有网时提交！",
              });
            }
          }
        },
      });
    },

    // 点击离线保存时触发的操作
    offline_save_befor() {
      let that = this;
      let networkType = navigator.onLine;
      // 判断当前网络状况
      if (networkType) {
        uni.showModal({
          title: "提示",
          content: "当前网络正常，确定离线保存？",
          success: function (res) {
            if (res.confirm) {
              that.offline_save();
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      } else {
        uni.showModal({
          title: "提示",
          content: "离线保存后可前往任务信息详情页面在线提交？",
          success: function (res) {
            if (res.confirm) {
              that.offline_save();
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },
    // 离线保存操作
    offline_save() {
      let that = this;
      // 根据是否涉及判断所需校验的数据是什么;以及对应的校验文本是什么
      let checkData, checkDataName;
      let practice = that.$store.state.manage.practice; // 获取该任务是月度、季度、年度类型
      let typeList = that.$store.state.manage.typeList;
      let manageList = that.$store.state.manage.manageList;
      let typeListIndex = that.$store.state.manage.typeListIndex;
      if (
        that.valiFormData.involve == "1" &&
        that.valiFormData.required.indexOf(practice) != "-1"
      ) {
        checkData = [
          "checkNum",
          "location",
          "content",
          "problemAction",
          "judgment",
        ];
        checkDataName = [
          "抽查数量",
          "位置",
          "测试结果",
          "发现问题及处理措施",
          "是否合格",
        ];
      } else {
        checkData = [];
        checkDataName = [];
      }
      for (let j = 0; j < checkData.length; j++) {
        if (
          that.valiFormData[checkData[j]] == null ||
          that.valiFormData[checkData[j]] == ""
        ) {
          uni.showToast({
            title: `请填写${checkDataName[j]}`,
            icon: "none",
            duration: 1200,
          });
          return;
        }
      }
      // 附加判断条件
      if (
        that.valiFormData.involve == "1" &&
        that.valiFormData.required.indexOf(practice) != "-1"
      ) {
        if (this.fileUrl.length == 0) {
          uni.showToast({
            title: "请上传现场检查照片",
            icon: "none",
            duration: 1200,
          });
          return;
        }
      }
      var timeStr = getDateTime.dateTimeStr("y-m-d h:i:s");
      let fileUrl = that.fileUrl.join(",");
      let monent = {
        name: that.$store.state.manage.taskName || null, // 任务名称
        checkNum: that.valiFormData.checkNum || null,
        content: that.valiFormData.content || null,
        contentName: that.valiFormData.contentName || null, // 子项任务名称
        executeId: that.valiFormData.executeId || null,
        fileUrls: fileUrl || null, // 上传文件列表
        involve: that.valiFormData.involve || null, // 是否涉及
        judgment: that.valiFormData.judgment || "",
        maintainDetailId: that.valiFormData.maintainDetailId || null, // 必传项
        problemAction: that.valiFormData.problemAction || null,
        required: that.valiFormData.required || null,
        startTime: that.valiFormData.startTime
          ? that.valiFormData.startTime
          : timeStr,
        state: "1",
        location: that.valiFormData.location || null,
        taskId: that.valiFormData.taskId || null, // 必传项
      };
      that.$nextTick(() => {
        that.$store.commit("saveContentObj", monent);
        typeList.forEach((item) => {
          for (let k = 0; k < item.data.length; k++) {
            if (item.data[k].executeId == monent.executeId) {
              item.data[k] = monent;
            }
          }
        });
        that.flag = true;
        manageList[typeListIndex].sub_btn = false;
        that.$store.commit("changeState", true);

        let list = uni.getStorageSync("online_list") || [];
        let index = list.findIndex(
          (item) => item.executeId == monent.executeId
        );
        if (index == "-1") {
          list.push(monent);
        } else {
          list[index] = monent;
        }
        that.$store.commit("save_online_list", list);
      });
      // 跳转回执业内容
      setTimeout(() => {
        // wx.disableAlertBeforeUnload({
        //   complete: (e) => {
        //     console.log(e);
        //   }
        // })
        uni.navigateBack();
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.NAVBAR_left {
  color: white;
}

/deep/.is-input-border {
  border: none;
}

/deep/.uni-forms-item__label {
  padding: 0;
}

::v-deep .uni-forms-item {
  width: 100%;
}

.check-box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  min-height: calc(100vh - 80rpx);
  background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;

  &-num {
    background: #fff;
    padding: 0 25rpx;
    margin-bottom: 16rpx;
    width: calc(100% - 40rpx);
    margin: 0 auto 24rpx;
    min-height: 110rpx;
    display: flex;
    align-items: center;
    border-radius: 20rpx;

    &-span {
      font-size: 20rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #dc1010;
      margin-top: 21rpx;
    }
  }

  &-btn {
    position: fixed;
    width: 100%;
    height: 100rpx;
    background: #fff;
    border-top: 1rpx solid #e5e5e5;
    bottom: 0;

    &-online {
      width: 710rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
      color: #fff;
      font-size: 28rpx;
      margin: 10rpx auto;
    }

    &-unonline {
      width: 710rpx;
      margin: 10rpx auto;
      display: flex;

      &-btn {
        height: 80rpx;
        line-height: 80rpx;
        color: #fff;
        flex: 1;
        margin: 0 20rpx;
        font-size: 28rpx;
      }

      .left {
        background: $OVERALL_CLOSE_BUTTON_COLOR;
        color: $OVERALL_SITUATION_BACKGROUND;
      }

      .rigth {
        background: $OVERALL_CONFIRM_BUTTON_COLOR;
      }
    }
  }
}

.photoArray {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
</style>
